<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8/>
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>GraphQL Playground</title>
  <link rel="shortcut icon" href="https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.22/build/favicon.png" />

  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@saleor/graphql-playground@3.0.0/dist/umd/index.css"
    integrity="sha512-6yzktgk11EmjCnuWTl0+FImf6MG3c+mqrO33bCiwaeouI5RoAJKSyKmLGFAYt44jRtr/bgkjqvRUxay3Ih05cw=="
    crossorigin="anonymous"
  />
  <!-- sha256-Y/huXlwoYkVyQlxwSVcCi1RCDGDCSVBzDt0hYP9qlTc= is inline css added by the playground when opening settings -->
  <!-- sha256-hM8ziVmFsNZhvY3EjvTholqPBoYTMv/3+1nOBhZrL+c= is the inline code below -->
  <meta http-equiv="content-security-policy" content="default-src 'none'; connect-src {{ api_url }} {{ plugins_url }}; script-src https://cdn.jsdelivr.net/npm/@saleor/graphql-playground@3.0.0/dist/umd/index.js 'sha256-hM8ziVmFsNZhvY3EjvTholqPBoYTMv/3+1nOBhZrL+c='; style-src https://cdn.jsdelivr.net/npm/@saleor/graphql-playground@3.0.0/dist/umd/index.css 'sha256-Y/huXlwoYkVyQlxwSVcCi1RCDGDCSVBzDt0hYP9qlTc='; font-src 'self' data:; img-src data: https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.22/build/favicon.png" />
  <meta name="robots" content="noindex, nofollow">
</head>
<body>
  <div id="root" data-endpoint="{{ api_url }}" {% if query %}data-query="{{ query }}"{% endif %}></div>
  <script
    src="https://cdn.jsdelivr.net/npm/@saleor/graphql-playground@3.0.0/dist/umd/index.js"
    integrity="sha512-xbGZvNZugfiqQdC42yV5/CDwkcGReW4Jo5v39eWOG6Y63fQuhb/NulSUIH4oWIJxbZOKAdQbgMxwkOEt0U++bA=="
    crossorigin="anonymous">
  </script>

  {# sha256-hM8ziVmFsNZhvY3EjvTholqPBoYTMv/3+1nOBhZrL+c= #}
  <script type="module">
    const root = document.querySelector("#root");
    const endpoint = root.dataset.endpoint;
    const query = root.dataset.query;

    createPlayground(root, { query, endpoint });
  </script>
</body>
</html>
